<template>
  <div class="common-layout">
    <el-header class="main-header">
      <div class="main-nav">
        <div class="logo-container">
          <router-link to="/">
            <el-icon :size="32" color="#2589ff"><School /></el-icon>
            <span class="logo-text">领课教育</span>
          </router-link>
        </div>
        
        <div class="nav-links">
          <el-dropdown>
            <span class="nav-item el-dropdown-link">
              课程 <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>全部课程</el-dropdown-item>
                <el-dropdown-item>精品课程</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <a href="#" class="nav-item">数字教材</a>
          <a href="#" class="nav-item">学校</a>
          <a href="#" class="nav-item">学云</a>
          <a href="#" class="nav-item">升学考研</a>
        </div>
        
        <div class="search-container">
          <el-input
            v-model="searchQuery"
            placeholder="搜索课程"
            class="input-with-select"
            @keyup.enter="handleSearch"
          >
            <template #prepend>
              <el-select placeholder="课程" style="width: 80px;">
                <el-option label="课程" value="course"></el-option>
                <el-option label="教师" value="teacher"></el-option>
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" @click="handleSearch" />
            </template>
          </el-input>
        </div>
        
        <div class="nav-right">
          <template v-if="userStore.isLoggedIn && userStore.userInfo">
            <el-dropdown trigger="click" popper-class="user-dropdown">
              <span class="user-profile-link">
                <el-avatar :size="32" class="user-avatar">
                  {{ userStore.userInfo.name?.charAt(0).toUpperCase() || 'U' }}
                </el-avatar>
                <span class="username">Hi, {{ userStore.userInfo.name }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('/profile')">
                    <el-icon><User /></el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/profile', { tab: 'myCourses' })">
                    <el-icon><Collection /></el-icon>我的课程
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/profile', { tab: 'myOrders' })">
                    <el-icon><List /></el-icon>我的订单
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <a href="#" class="nav-item" @click.prevent="navigateTo('/login')">登录</a>
            <span class="separator">|</span>
            <a href="#" class="nav-item" @click.prevent="navigateTo('/register')">注册</a>
          </template>
        </div>
      </div>
    </el-header>
    
    <el-main class="main-content">
      <router-view></router-view>
    </el-main>
    
    <el-footer class="main-footer">
      <div class="footer-content">
        <p>© 2024 领课教育在线. All Rights Reserved. Designed with ❤️.</p>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">服务条款</a>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import { 
  ArrowDown, 
  School, 
  User, 
  Collection, 
  List, 
  SwitchButton,
  Search
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const searchQuery = ref('')

onMounted(() => {
  if (!userStore.isLoggedIn) {
    userStore.fetchUserInfo()
  }
})

const handleLogout = () => {
  userStore.logout()
  ElMessage.success('您已安全退出')
  router.push('/login')
}

const navigateTo = (path, query) => {
  router.push({ path, query })
}

const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({ path: '/courses', query: { keyword: searchQuery.value.trim() } })
    searchQuery.value = ''
  }
}
</script>

<style scoped>
:global(body) {
  background-color: #f7f8fa;
  margin: 0;
}

.common-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: 64px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.main-nav {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  margin-right: 20px;
}

.logo-container a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo-text {
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

.nav-links {
  display: flex;
  gap: 25px;
  align-items: center;
  flex-grow: 1;
}

.nav-item {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.3s;
}

.nav-item:hover, .el-dropdown-link:hover {
  color: #2589ff;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-container {
  width: 350px;
  margin: 0 20px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-profile-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.username {
  font-weight: 500;
}

.separator {
  color: #dcdfe6;
  margin: 0 5px;
}

.main-content {
  flex: 1;
  padding-top: 24px;
  background-color: #fff;
}

.main-footer {
  background-color: #343a40;
  color: #adb5bd;
  padding: 30px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #adb5bd;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

/* Dropdown style */
:global(.user-dropdown .el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style> 